<template >
  <CCard>
    <div>
      <!-- 头部查询帅选功能 -->
      <div>
        <CRow class="rowstyle">
          <CCol sm="4" style>
            <label class="labelName">订单编号</label>
            <i-select
              :model.sync="model1"
              v-model="selectvalue"
              class="pickstyle"
            >
              <!-- <i-option v-for="item in List" v-bind:value="item.value" @click="optionfaction(item.value)">{{ item.label }}</i-option> -->
            </i-select>
          </CCol>
          <CCol sm="4" style>
            <label class="labelName">订单编号</label>
            <Input
              v-model="groupName1"
              placeholder="请输入任务名称搜..."
              class="pickstyle"
              :title="groupName1"
              maxlength="8"
            />
          </CCol>
          <CCol sm="4" style>
            <label class="labelName">订单创建人</label>
            <Input
              v-model="groupName2"
              placeholder="请输入任务名称搜..."
              class="pickstyle"
              :title="groupName2"
              maxlength="30"
            />
          </CCol>
        </CRow>
        <br />
        <CRow class="rowstyle">
          <CCol sm="4" style>
            <label class="labelName">创建时间</label>
            <DatePicker
              @on-change="onStartTimeChange"
              :options="startTimeOption"
              :editable="false"
              type="date"
              placeholder="请选择开始日期"
              v-model="startDate"
              class="pickstyle"
            ></DatePicker>
          </CCol>
          <CCol sm="4"></CCol>
          <CCol sm="4">
            <CButton color="info" @click="getModel" class="cbtnstyle">
              <CIcon name="cil-magnifying-glass" />&nbsp;搜索
            </CButton>
            <CButton color="info" @click="clearModel" class="cbtnstyle1">
              <img
                src="@/assets/icons/chongzhi.png"
                style="width: 15px; height: 15px"
                alt
              />&nbsp; 重置
            </CButton>
          </CCol>
        </CRow>
      </div>
      <!-- 表单主体 -->
      <div class="bodystyle">
        <CDataTable
          :items="data1"
          :fields="fields"
          hover
          pagination
          border
        ></CDataTable>
      </div>
    </div>
  </CCard>
</template>
<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:4%;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "订单编号",
    key: "num",
    _style: "width:17%;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "订单名称",
    key: "name",
    _style: "width:16%;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "创建时间",
    key: "time",
    _style: "width:10%;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "景数",
    key: "age",
    _style: "width:5%;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "订单创建人",
    key: "people",
    _style: "width:8%;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  // {
  //   key: "show_details",
  //   label: "操作",
  //   _style: "width:13%;text-align: center",
  //   align: "center"
  // }
];
export default {
  name: "dataOrder",
  data() {
    return {
      selectvalue: "",
      groupName1: "",
      groupName2: "",
      groupName3: "",
      totalvalue: 60,
      fields,
      List: [
        {
          value: "all",
          label: "全部",
        },
      ],
      model1: "",
      startDate: "",
      startTimeOption: {},
      data1: [
        {
          number: 1,
          num: "元数据生成_admin_2020.4.26.16.48.37",
          name: "元数据生成",
          time: "2020-04-26 16:49:00",
          age: 18,
          address: "1",
          people: "admin",
        },
        {
          number: 2,
          num: "MODIS数据预处理_admin_2020.4.26.16.36.28",
          name: "MODIS数据预处理",
          time: "2020-04-26 16:49:00",
          age: 18,
          address: "2",
          people: "admin",
        },
        {
          number: 3,
          num: "单景融合影像生产无质检Test_admin_2020.4.26.13.49.09",
          name: "单景融合影像生产",
          time: "2020-04-26 16:49:00",
          age: 18,
          address: "2",
          people: "admin",
        },
        {
          number: 4,
          num: "GF1推送任务融合流程带自动质检_admin_2020.4.26.09.40.28",
          name: "GF1推送任务融合流程带自动质检",
          time: "2020-04-26 16:49:00",
          age: 18,
          address: "1",
          people: "admin",
        },
      ],
    };
  },
  mounted() {
    this.onStartTimeChange(this.startTime);
    if (this.$route.query.from === "adminHome") {
      // 调用父组件的方法
      this.$parent.$parent.headershowOrder();
    }
  },
  watch: {
    groupName1(newVal, oldVal) {
      if (newVal.length >= 8) {
        this.$Message.warning("订单编号长度不得超过8个字符");
      }
    },
    groupName2(newVal, oldVal) {
      if (newVal.length >= 30) {
        this.$Message.warning("订单创建人长度不得超过30个字符");
      }
    },
  },
  methods: {
    // 输入框判断 start
    onStartTimeChange(startTime, type) {
      this.startTimeOption = {
        disabledDate(startTime) {
          return startTime > Date.now();
        },
      };
    },
    // end
    optionfaction(data) {
      this.selectvalue = data;
    },
    handleCurrentChange(val) {
      console.log("handleCurrentChange", val);
    },
    handleSizeChange(val) {
      console.log("handleSizeChange", val);
    },
    getModel() {
      if (this.selectvalue == null) {
        console.log("1", this.groupName1);
        console.log("2", this.groupName2);
        console.log("3", this.groupName3);
      }
      if (this.selectvalue != null) {
        console.log("4", this.selectvalue);
      }
    },
    clearModel() {
      this.groupName1 = null;
      this.groupName2 = null;
      this.groupName3 = null;
      this.selectvalue = null;
    },
  },
};
</script>
<style scoped>
.pickstyle {
  width: 220px;
  margin-left: 15px;
}
.bodystyle {
  margin-top: 20px;
}
.footerstyle {
  margin-top: 20px;
}
.cbtnstyle {
  width: 90px;
  height: 35px;
  /* margin-left: 125px; */
}
.cbtnstyle1 {
  width: 90px;
  height: 35px;
  margin-left: 20px;
}
.card {
  padding: 30px;
  height: 870px;
}
 
</style>